<page-header class="bg-green-600"></page-header>

<div class="data-grid-options">
    <mat-checkbox [(ngModel)]="rowSelectable">Row Selectable</mat-checkbox>
    <mat-checkbox [(ngModel)]="hideRowSelectionCheckbox">Hide checkbox</mat-checkbox>
    <mat-radio-group [(ngModel)]="multiSelectable">
        <mat-radio-button [value]="false">Single Selectable</mat-radio-button>
        <mat-radio-button [value]="true">Multiple Selectable</mat-radio-button>
    </mat-radio-group>
    <mat-checkbox [(ngModel)]="showToolbar">Show Toolbar</mat-checkbox>
    <mat-checkbox [(ngModel)]="columnHideable">Column Hiding</mat-checkbox>
    <mat-checkbox [(ngModel)]="columnMovable">Column Moving</mat-checkbox>
    <mat-checkbox [(ngModel)]="rowHover">Hover</mat-checkbox>
    <mat-checkbox [(ngModel)]="rowStriped">Striped</mat-checkbox>
    <mat-checkbox [(ngModel)]="expandable" (change)="enableRowExpandable()">Row Expandable
    </mat-checkbox>
    <mat-checkbox [(ngModel)]="showPaginator">Show Paginator</mat-checkbox>
    <mat-checkbox [(ngModel)]="isLoading">Loading Status</mat-checkbox>
</div>
<p>
    <a href="https://ng-matero.github.io/extensions/data-grid" target="_blank">View more
        examples</a>
</p>

<mtx-grid [data]="list"
          [columns]="columns"
          [loading]="isLoading"
          [multiSelectable]="multiSelectable"
          [rowSelectable]="rowSelectable"
          [hideRowSelectionCheckbox]="hideRowSelectionCheckbox"
          [rowHover]="rowHover"
          [rowStriped]="rowStriped"
          [showToolbar]="showToolbar"
          [toolbarTitle]="'Data Grid Toolbar'"
          [columnHideable]="columnHideable"
          [columnMovable]="columnMovable"
          [expandable]="expandable"
          [expansionTemplate]="expansionTpl"
          [pageOnFront]="showPaginator"
          [showPaginator]="showPaginator"
          [pageSizeOptions]="[5,10,50,100]"
          [pageIndex]="0"
          [pageSize]="5"
          (sortChange)="changeSort($event)"
          (selectionChange)="changeSelect($event)">
</mtx-grid>
<ng-template #expansionTpl let-row>
    {{row.name}}
</ng-template>
